import '../css/style.css'
import { Message } from '../plugins/message'

window.addEventListener('resize', () => {
    // We execute the same script as before
    let vh = window.innerHeight * 0.01
    document.documentElement.style.setProperty('--vh', `${vh}px`)
})

start_button.addEventListener('click', () => {
    overlay.style.display = 'none'
    start_modal.style.display = 'none'
    const message = new Message()
    checkVacancyForCustomer(() => {
        message.show({
            type: 'danger',
            text: '餐厅目前有空位，赶紧点击等待中的客人头像，让客人赶紧入座点餐吧',
            duration: 6000, // 不会自动消失
            closeable: true, // 可手动关闭
        })
    })
})

let timer = null
let progress_width = document.querySelector('.progress-container').clientWidth
start_button.addEventListener('click', () => {
    waiting_customers.style.visibility = 'visible'
    let num = 0
    timer = setInterval(() => {
        num += 1
        if (num >= progress_width) {
            progress_bar.style.width = 'inherit'
            progress_text.textContent = '爷不等了'
            setTimeout(() => {
                progress_bar.parentNode.parentNode.style.display = 'none'
            }, 1500)
            clearInterval(timer)
        } else {
            progress_bar.style.width = num + 'px'
        }
    }, 1000)
})

customer_area.addEventListener('click', e => {
    if (e.target.classList[0] === 'menu') {
        overlay.style.display = 'block'
        order_form.style.visibility = 'visible'
    }
})

waiting_customers.addEventListener('click', e => {
    clearInterval(timer)
    e.target.remove()
    checkVacancyForCustomer(greetGuest)
})

exit.onclick = exitRestaurant

// 检查顾客区域是否有空位
function checkVacancyForCustomer(callback) {
    let served_people = document.querySelectorAll('.customer-area .people')
    for (let i = 0; i < served_people.length; ++i) {
        let item = served_people[i]
        if (item.childElementCount === 0) {
            callback(item)
            break
        }
    }
}

// 接待顾客, 进入餐厅
function greetGuest(seat) {
    seat.innerHTML += `<img src="/img/menu.png" alt="菜单" class="menu"><img src="/img/customer_3.png" alt="顾客3号" class="customer bg-brown">`
    const message = new Message()
    message.show({
        type: 'success',
        text: '顾客3号进入餐厅',
        duration: 6000, // 不会自动消失
        closeable: true, // 可手动关闭
    })
}

// 点餐
function orderFood(params) {}

// 送客，离开餐厅
function exitRestaurant(e) {
    overlay.style.display = 'none'
    order_form.style.visibility = 'hidden'
    const message = new Message()
    message.show({
        type: 'success',
        text: '顾客3号离开了餐厅',
        duration: 3000, // 不会自动消失
        closeable: true, // 可手动关闭
    })
}
